import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { Button, Checkbox, Form, Input, Card,Message } from "antd";
import {dologin, prepare,verifyCode,getCode} from '../../api/oss/login'
import "../../entry/common.less";

const LoginPage = (props) => {
const history = useHistory();
 const onFinish = async(values) => {
    let res  = await dologin(values);
    if(res.flag) {
      localStorage.setItem("ossToken",res.token)
      history.push("/")
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log(errorInfo);
  };
  const renderCode = () =>{
    getCode().then((res) =>{
      let img = document.getElementById("imgCode");
      let binaryData = [];
      binaryData.push(res);
      img.src = window.URL.createObjectURL(new Blob(binaryData, {type: "image/jpeg"}));
  });
  };
  const doPrepare = () =>{
    prepare().then((res) =>{
        if(res.flag){
            localStorage.setItem("SID",res.data)
            renderCode();
        }
    })
  }
  const asyncVerifyCode = (event) =>{
     verifyCode(event.target.value)
  }
  useEffect(()=>{
     doPrepare()
  },[]);
    return (
      <div className="loginFormBox">
        <Card title="瑞兴后台" style={{ width: 650 }}>
          <Form
            className="loginForm"
            name="loginForm"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="account"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
              wrapperCol={{
                span: 12,
              }}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
              wrapperCol={{
                span: 12,
              }}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="验证码"
              wrapperCol={{
                span: 16,
              }}
            >
                <Form.Item  
                 name="code"
                 rules={[
                  {
                    required: true,
                    message: "Please input your validateCode!",
                  },
                ]}
                noStyle
                >
                <Input maxLength = {6}  style={{ width: 100 }} onBlur={asyncVerifyCode}/>
                </Form.Item>
                <img alt="验证码" id="imgCode" style={{width:100,height:40,marginLeft:50,cursor:'pointer'}} onClick={renderCode}/>
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 11,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>

          </Form>
        </Card>
      </div>
    );
}

export default LoginPage